<template>
  <div class="mainContainer">
    <Header />
    <div class="content-announcement"></div>
    <div class="content-table">
      <!-- 功能区 -->
      <tableTool />

      <!-- 数据表单 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop="graduation" label="毕业届" width="100" sortable>
        </el-table-column>
        <el-table-column prop="students" label="学生人数" width="120" sortable>
        </el-table-column>
        <el-table-column prop="applyTime" label="申请时间" width="140" sortable>
        </el-table-column>
        <el-table-column
          prop="completeTime"
          label="完成时间"
          width="140"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="archiveManage"
          label="归档管理"
          width="400"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.$index)" size="mini"
              >查看</el-button
            >
            <el-button size="mini">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="page">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          background
          layout="prev, pager, next, jumper,sizes, total"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/MainHeader/GuiDangManage/GuiDangApplyList.vue';
import tableTool from '@/components/Function/TableTool.vue';

export default {
  components: { Header, tableTool },
  data() {
    return {
      tableData: [
        {
          graduation: '2017',
          students: 1478,
          applyTime: '2020-11-28',
          completeTime: '2021-5-28',
          archiveManage: '',
        },
        {
          graduation: '2018',
          students: 1624,
          applyTime: '2021-11-28',
          completeTime: '2022-5-28',
          archiveManage: '',
        },
        {
          graduation: '2019',
          students: 1572,
          applyTime: '2022-11-28',
          completeTime: '2023-5-28',
          archiveManage: '',
        },
      ],
    };
  },
  methods: {
    handleClick(index) {
      alert(index);
    },
  },
};
</script>

<style lang="less">
.mainContainer {
  .content-announcement,
  .content-table {
    position: relative;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
    top: 60px;
    margin: 0 20px 15px;
  }

  .content-announcement {
    height: 20px;
  }

  .content-table {
    padding: 10px 0;

    .page {
      height: 30px;
      padding: 5px 5px 0;
      line-height: 50px;
    }
  }
}
</style>
